<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>脑卒中风险筛查</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: #333;
            line-height: 1.6;
            padding: 20px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 500px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 25px;
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        h1 {
            color: #2c80ff;
            margin-bottom: 10px;
            font-size: 24px;
        }
        
        .subtitle {
            color: #666;
            font-size: 14px;
        }
        
        .card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 18px;
            color: #2c80ff;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f4f8;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .question {
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 10px;
            background: #f9fbfd;
            transition: all 0.3s;
        }
        
        .question:hover {
            background: #f0f7ff;
        }
        
        .question-text {
            font-weight: 500;
            margin-bottom: 12px;
            font-size: 16px;
            color: #444;
        }
        
        .options {
            display: flex;
            gap: 10px;
        }
        
        .option {
            flex: 1;
            text-align: center;
            padding: 10px 5px;
            border: 1px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .option.selected {
            background-color: #2c80ff;
            color: white;
            border-color: #2c80ff;
            box-shadow: 0 3px 8px rgba(44, 128, 255, 0.3);
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: linear-gradient(to right, #2c80ff, #5a9cff);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(44, 128, 255, 0.3);
            margin-top: 10px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(44, 128, 255, 0.4);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .result {
            display: none;
            text-align: center;
            padding: 25px;
            border-radius: 15px;
            margin-top: 20px;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .low-risk {
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            color: #2e7d32;
        }
        
        .medium-risk {
            background: linear-gradient(135deg, #fff3e0, #ffecb3);
            color: #ef6c00;
        }
        
        .high-risk {
            background: linear-gradient(135deg, #ffebee, #ffcdd2);
            color: #c62828;
        }
        
        .result-icon {
            font-size: 60px;
            margin-bottom: 15px;
        }
        
        .result-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .result-description {
            margin-bottom: 20px;
            line-height: 1.8;
        }
        
        .restart-btn {
            background: linear-gradient(to right, #4caf50, #66bb6a);
        }
        
        .qr-section {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .qr-code {
            width: 180px;
            height: 180px;
            margin: 15px auto;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .qr-code::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(44, 128, 255, 0.1), rgba(44, 128, 255, 0.2));
        }
        
        .qr-text {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
        
        .stats {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .stats-title {
            font-size: 18px;
            color: #2c80ff;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .stat-item {
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            background: #f9fbfd;
        }
        
        .stat-value {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 12px;
            color: #666;
        }
        
        .low-stat {
            color: #2e7d32;
        }
        
        .medium-stat {
            color: #ef6c00;
        }
        
        .high-stat {
            color: #c62828;
        }
        
        .admin-btn {
            background: linear-gradient(to right, #9c27b0, #ba68c8);
            margin-top: 15px;
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #888;
            font-size: 12px;
        }
        
        @media (max-width: 480px) {
            body {
                padding: 15px;
            }
            
            .card {
                padding: 15px;
            }
            
            h1 {
                font-size: 20px;
            }
            
            .options {
                flex-direction: column;
                gap: 8px;
            }
            
            .option {
                padding: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>脑卒中风险筛查</h1>
            <p class="subtitle">8+2风险评估表 · 预防脑卒中</p>
        </div>
        
        <div class="qr-section">
            <div class="qr-code">
                <span>扫描二维码开始筛查</span>
            </div>
            <p class="qr-text">使用微信或支付宝扫描上方二维码</p>
        </div>
        
        <div class="card">
            <div class="section-title">
                <i class="fas fa-heartbeat"></i>
                <span>8项核心危险因素</span>
            </div>
            
            <div class="question">
                <div class="question-text">1. 高血压病史（≥140/90 mmHg）,或正在服用降压药</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">2. 血脂异常或未知</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">3. 糖尿病</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">4. 心房颤动和心瓣膜病</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">5. 吸烟</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">6. 明显超重或肥胖（BMI≥26 kg/㎡）</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">7. 很少进行体育运动</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">8. 脑卒中家族史</div>
                <div class="options">
                    <div class="option" data-group="core" data-value="1">是</div>
                    <div class="option" data-group="core" data-value="0">否</div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="section-title">
                <i class="fas fa-exclamation-triangle"></i>
                <span>2项警示病史</span>
            </div>
            
            <div class="question">
                <div class="question-text">9. 既往有脑卒中（中风）病史</div>
                <div class="options">
                    <div class="option" data-group="warning" data-value="1">是</div>
                    <div class="option" data-group="warning" data-value="0">否</div>
                </div>
            </div>
            
            <div class="question">
                <div class="question-text">10. 既往有短暂脑缺血发作（小中风）病史</div>
                <div class="options">
                    <div class="option" data-group="warning" data-value="1">是</div>
                    <div class="option" data-group="warning" data-value="0">否</div>
                </div>
            </div>
        </div>
        
        <button class="btn" id="submit-btn">提交评估</button>
        
        <div class="result" id="result">
            <div class="result-icon" id="result-icon"></div>
            <div class="result-title" id="result-title">评估结果</div>
            <div class="result-description" id="result-description"></div>
            <button class="btn restart-btn" id="restart-btn">重新评估</button>
            <button class="btn admin-btn" id="stats-btn">查看统计</button>
        </div>
        
        <div class="stats" id="stats">
            <div class="stats-title">筛查统计结果</div>
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-value low-stat" id="low-count">0</div>
                    <div class="stat-label">低危人群</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value medium-stat" id="medium-count">0</div>
                    <div class="stat-label">中危人群</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value high-stat" id="high-count">0</div>
                    <div class="stat-label">高危人群</div>
                </div>
            </div>
            <button class="btn" id="close-stats-btn" style="margin-top:15px;">关闭统计</button>
        </div>
        
        <div class="footer">
            <p>© 2023 脑卒中风险筛查系统 | 本结果仅供参考，如有疑问请咨询专业医生</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化统计
            initStats();
            
            // 选项选择逻辑
            const options = document.querySelectorAll('.option');
            options.forEach(option => {
                option.addEventListener('click', function() {
                    const group = this.getAttribute('data-group');
                    const parentQuestion = this.closest('.question');
                    
                    // 清除同问题下的其他选项选择
                    const siblingOptions = parentQuestion.querySelectorAll('.option');
                    siblingOptions.forEach(opt => opt.classList.remove('selected'));
                    
                    // 选中当前选项
                    this.classList.add('selected');
                });
            });
            
            // 提交按钮逻辑
            document.getElementById('submit-btn').addEventListener('click', function() {
                // 检查是否所有问题都已回答
                const questions = document.querySelectorAll('.question');
                let allAnswered = true;
                
                questions.forEach(question => {
                    const selected = question.querySelector('.option.selected');
                    if (!selected) {
                        allAnswered = false;
                        question.style.animation = 'shake 0.5s';
                        setTimeout(() => {
                            question.style.animation = '';
                        }, 500);
                    }
                });
                
                if (!allAnswered) {
                    alert('请回答所有问题后再提交评估');
                    return;
                }
                
                // 计算风险评估
                const riskLevel = calculateRisk();
                showResult(riskLevel);
                
                // 保存结果到本地存储
                saveResult(riskLevel);
            });
            
            // 重新评估按钮逻辑
            document.getElementById('restart-btn').addEventListener('click', function() {
                // 清除所有选择
                options.forEach(option => {
                    option.classList.remove('selected');
                });
                
                // 隐藏结果
                document.getElementById('result').style.display = 'none';
                
                // 滚动到顶部
                window.scrollTo(0, 0);
            });
            
            // 查看统计按钮
            document.getElementById('stats-btn').addEventListener('click', function() {
                document.getElementById('stats').style.display = 'block';
                updateStatsDisplay();
            });
            
            // 关闭统计按钮
            document.getElementById('close-stats-btn').addEventListener('click', function() {
                document.getElementById('stats').style.display = 'none';
            });
            
            // 风险评估计算函数
            function calculateRisk() {
                // 计算核心危险因素数量
                let coreCount = 0;
                const coreOptions = document.querySelectorAll('.option[data-group="core"].selected');
                coreOptions.forEach(option => {
                    if (option.getAttribute('data-value') === '1') {
                        coreCount++;
                    }
                });
                
                // 检查是否有警示病史
                let hasWarning = false;
                const warningOptions = document.querySelectorAll('.option[data-group="warning"].selected');
                warningOptions.forEach(option => {
                    if (option.getAttribute('data-value') === '1') {
                        hasWarning = true;
                    }
                });
                
                // 检查是否有慢性病（高血压、糖尿病、心房颤动和心瓣膜病）
                let hasChronic = false;
                const chronicQuestions = document.querySelectorAll('.question:nth-child(1) .option.selected, .question:nth-child(3) .option.selected, .question:nth-child(4) .option.selected');
                chronicQuestions.forEach(option => {
                    if (option.getAttribute('data-value') === '1') {
                        hasChronic = true;
                    }
                });
                
                // 根据规则判断风险等级
                if (hasWarning || coreCount >= 3) {
                    return 'high';
                } else if (coreCount < 3 && hasChronic) {
                    return 'medium';
                } else {
                    return 'low';
                }
            }
            
            // 显示结果函数
            function showResult(riskLevel) {
                const resultDiv = document.getElementById('result');
                const resultIcon = document.getElementById('result-icon');
                const resultTitle = document.getElementById('result-title');
                const resultDescription = document.getElementById('result-description');
                
                // 移除所有风险类别
                resultDiv.classList.remove('low-risk', 'medium-risk', 'high-risk');
                
                // 根据风险等级设置显示内容
                switch(riskLevel) {
                    case 'low':
                        resultDiv.classList.add('low-risk');
                        resultIcon.innerHTML = '<i class="fas fa-smile"></i>';
                        resultTitle.textContent = '低危人群';
                        resultDescription.innerHTML = '恭喜！您属于脑卒中低危人群。<br>继续保持健康的生活方式，定期体检。';
                        break;
                    case 'medium':
                        resultDiv.classList.add('medium-risk');
                        resultIcon.innerHTML = '<i class="fas fa-exclamation-circle"></i>';
                        resultTitle.textContent = '中危人群';
                        resultDescription.innerHTML = '您属于脑卒中中危人群。<br>建议改善生活方式，控制慢性病，定期进行健康检查。';
                        break;
                    case 'high':
                        resultDiv.classList.add('high-risk');
                        resultIcon.innerHTML = '<i class="fas fa-heartbeat"></i>';
                        resultTitle.textContent = '高危人群';
                        resultDescription.innerHTML = '您属于脑卒中高危人群！<br>建议尽快咨询神经科医生，进行专业评估和干预。';
                        break;
                }
                
                // 显示结果区域
                resultDiv.style.display = 'block';
                
                // 滚动到结果区域
                resultDiv.scrollIntoView({ behavior: 'smooth' });
            }
            
            // 初始化统计
            function initStats() {
                if (!localStorage.getItem('strokeScreeningStats')) {
                    const initialStats = {
                        low: 0,
                        medium: 0,
                        high: 0
                    };
                    localStorage.setItem('strokeScreeningStats', JSON.stringify(initialStats));
                }
            }
            
            // 保存结果到本地存储
            function saveResult(riskLevel) {
                const stats = JSON.parse(localStorage.getItem('strokeScreeningStats'));
                stats[riskLevel]++;
                localStorage.setItem('strokeScreeningStats', JSON.stringify(stats));
            }
            
            // 更新统计显示
            function updateStatsDisplay() {
                const stats = JSON.parse(localStorage.getItem('strokeScreeningStats'));
                document.getElementById('low-count').textContent = stats.low;
                document.getElementById('medium-count').textContent = stats.medium;
                document.getElementById('high-count').textContent = stats.high;
            }
        });
    </script>
</body>
</html>